<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">

	<ui:composition template="/templates/template-menu.xhtml">
	
		<ui:define name="scripts">
		
				<script type="text/javascript">
	
					function submeter(formId){
						jQuery("#"+formId).submit(function(){
	
							var cnpjFormatado = jQuery("#cnpj-cliente").val().replace(".","").replace(".","").replace("/","").replace("-","");
	
							if(cnpjFormatado != ""){
	
								jQuery("#cnpj-cliente").val(cnpjFormatado);
								
							}
	
							var incricaoEstadualFormatada = jQuery("#inscest-cliente").val().replace(".","").replace(".","").replace("-","");
	
							if(incricaoEstadualFormatada != ""){
	
								jQuery("#inscest-cliente").val(incricaoEstadualFormatada);
								
							}
	
							var cepFormatado = jQuery("#cep-cliente").val().replace("-","");
							
							if(cepFormatado != ""){
	
								jQuery("#cep-cliente").val(cepFormatado);
								
							}
	
							var telefoneFormatado = jQuery("#tel1-cliente").val().replace("(","").replace(")","").replace(" ","").replace("-","");
							
							if(telefoneFormatado != ""){
	
								jQuery("#tel1-cliente").val(telefoneFormatado);
								
							}
	
							var celularFormatado = jQuery("#tel2-cliente").val().replace("(","").replace(")","").replace(" ","").replace("-","");
							
							if(celularFormatado != ""){
	
								jQuery("#tel2-cliente").val(celularFormatado);
								
							}


							var cpfFormatado = jQuery("#cpf-administrador-cliente").val().replace(".","").replace(".","").replace("-","");

							if(cpfFormatado != ""){

								jQuery("#cpf-administrador-cliente").val(cpfFormatado);
								
							}

							var cpfFormatado = jQuery("#cpf-socio1-cliente").val().replace(".","").replace(".","").replace("-","");

							if(cpfFormatado != ""){

								jQuery("#cpf-socio1-cliente").val(cpfFormatado);
								
							}

							var cpfFormatado = jQuery("#cpf-socio2-cliente").val().replace(".","").replace(".","").replace("-","");

							if(cpfFormatado != ""){

								jQuery("#cpf-socio2-cliente").val(cpfFormatado);
								
							}
	
						});
					}
					
					function inibir(){
						jQuery("#id-cliente").bind("keypress",function(e){
							e.preventDefault();
						});
					}
	
			</script>
					
		</ui:define>
	
		<ui:define name="body">
		
		<rich:panel style="800px;">
	
			<f:facet name="header">
			
				<h:outputLabel value="Cadastro de clientes" style="FONT-SIZE: medium; FONT-FAMILY: 'SansSerif';"/>
				
			</f:facet>
	
			<h:form id="formulario-dados" prependId="false">
	
				<h:panelGrid columns="1" width="100%">
				
					<rich:panel>
					
						<f:facet name="header">
						
							<h:outputLabel value="Dados da Empresa" style="FONT-SIZE: small; FONT-FAMILY: 'SansSerif';"/>
							
						</f:facet>
						
						
						<h:panelGrid columns="4">
						
							<h:outputLabel value="Id*: " style="FONT-SIZE: medium; FONT-FAMILY: 'SansSerif';"/>
						
							<h:inputText id="id-cliente" value="#{clienteController.cliente.idCliente}" style="width:50px;" title="O número de registro do cliente é gerado automaticamente!"/>
							
							<rich:spacer width="20px"/>
							<h:outputText value="*Obs.: O Id será gerado de forma automática no caso de novos cadastros." style="FONT-WEIGHT: bold; FONT-SIZE: x-small; COLOR: #c0c0c0; FONT-FAMILY: 'SansSerif';"/>
						</h:panelGrid>
						
						<rich:spacer height="15px"/>
						<rich:separator width="100%"/>
						<rich:spacer height="15px"/>
						
						<h:panelGrid columns="11">
						
							<h:outputLabel value="Razão Social: " style="FONT-SIZE: medium; FONT-FAMILY: 'SansSerif';"/>
							
							<rich:spacer width="102px"></rich:spacer>
							
							<h:inputText id="razao-social-cliente" onkeypress="this.style.textTransform = 'uppercase';" value="#{clienteController.cliente.razaoSocial}" style="width:368px"/>
							
							<rich:spacer width="10px"></rich:spacer>
							
							<h:outputLabel value="CNPJ: " style="FONT-SIZE: medium; FONT-FAMILY: 'SansSerif';"/>
							
							<rich:spacer width="76px"></rich:spacer>
							
							<h:inputText id="cnpj-cliente" style="width:115px;" value="#{clienteController.cliente.cnpj}" >
								
								<rich:jQuery query="mask('99.999.999/9999-99');" selector="#cnpj-cliente" timing="onload"/>
								
							</h:inputText>
							
							<rich:spacer width="10px"></rich:spacer>
							
							<h:outputLabel value="Nome Fantasia: " style="FONT-SIZE: medium; FONT-FAMILY: 'SansSerif';"/>
							
							<rich:spacer width="13px"></rich:spacer>
							
							<h:inputText id="nome-fantasia-cliente" style="width:392px;" onkeypress="this.style.textTransform = 'uppercase';"
								value="#{clienteController.cliente.nomeFantasia}" />
								
						</h:panelGrid>
						
						<h:panelGrid columns="8">
	
							<h:outputLabel value="Ramo (Atividade econômica):" style="FONT-SIZE: medium; FONT-FAMILY: 'SansSerif';"/>
							
							<h:selectOneMenu id="ramo-cliente"
								value="#{clienteController.cliente.ramo}" style="width:369px">
								
								<f:selectItem itemValue="#{0}" itemLabel="Selecione..." />
								
								<f:selectItems value="#{ramoController.listaRamo}" />
								
							</h:selectOneMenu>
							
							<rich:spacer width="10px"></rich:spacer>
							
							<h:outputLabel value="Inscrição Estadual:" style="FONT-SIZE: medium; FONT-FAMILY: 'SansSerif';"/>
							
							<h:inputText id="inscest-cliente" style="width:115px;" value="#{clienteController.cliente.inscEst}" >
								
								<rich:jQuery query="mask('99.999.999-99')" selector="#inscest-cliente" timing="onload"/>
								
							</h:inputText>
							
							<rich:spacer width="10px"></rich:spacer>
								
							<h:outputLabel value="Data de fundação:" style="FONT-SIZE: medium; FONT-FAMILY: 'SansSerif';"/>
							
							<rich:calendar value="#{clienteController.cliente.desde}" datePattern="dd/MM/yyyy">
								
								<f:convertDateTime id="padraoDataDesde" pattern="dd/MM/yyyy" />
								
							</rich:calendar>
	
						</h:panelGrid>
						
					</rich:panel>
					
					<rich:spacer style="height:10px">
					
					</rich:spacer>
					
					<rich:panel>
	
						<f:facet name="header">
						
							<h:outputLabel value="Localização e Contatos" style="FONT-SIZE: small; FONT-FAMILY: 'SansSerif';"/>
							
						</f:facet>
	
						<h:panelGrid columns="16">
	
							<h:outputLabel value="Logradouro:" style="FONT-SIZE: medium; FONT-FAMILY: 'SansSerif';"/>
							
							<h:inputText id="logradouro-cliente" style="width:200px" onkeypress="this.style.textTransform = 'uppercase';" value="#{clienteController.cliente.logradouro}" />
							
							<rich:spacer width="10px"/>
							
							<h:outputLabel value="Número:" style="FONT-SIZE: medium; FONT-FAMILY: 'SansSerif';"/>
							
							<h:inputText id="numero-cliente" style="width:60px" value="#{clienteController.cliente.numero}" />
							
							<rich:spacer width="10px"/>
							
							<h:outputLabel value="Complemento: " style="FONT-SIZE: medium; FONT-FAMILY: 'SansSerif';"/>
							
							<h:inputText id="complemento-cliente"
								onkeypress="this.style.textTransform = 'uppercase';"
								value="#{clienteController.cliente.complemento}" />
							
							<rich:spacer width="10px"/>
							
							<h:outputLabel value="Bairro: " style="FONT-SIZE: medium; FONT-FAMILY: 'SansSerif';"/>
							
							<rich:spacer width="1px"/>
							
							<h:inputText id="bairro-cliente"
								onkeypress="this.style.textTransform = 'uppercase';"
								value="#{clienteController.cliente.bairro}" />
							
							<rich:spacer width="10px"/>
							
							<h:outputLabel value="UF:" style="FONT-SIZE: medium; FONT-FAMILY: 'SansSerif';"/>
							
							<rich:spacer width="21px"/>
							
							<a4j:region>
							<h:selectOneMenu id="uf-cliente"
								value="#{clienteController.cliente.uf}"
								onchange="submeter('formulario-dados');listarCidades();">
								
								<f:selectItem itemValue="#{0}" itemLabel="Selecione..." />
								
								<a4j:jsFunction name="listarCidades"
									actionListener="#{cidadeController.listarCidadesPorUf}"
									reRender="cidade-cliente" process="cidade-cliente" />
									
								<f:selectItems value="#{estadoController.listaEstado}" />
								
							</h:selectOneMenu>
							</a4j:region>
							
							</h:panelGrid>
							
							<h:panelGrid columns="17">
							
							<h:outputLabel value="Cidade:" style="FONT-SIZE: medium; FONT-FAMILY: 'SansSerif';"/>
							
							<rich:spacer width="29px"/>
							
							<h:selectOneMenu id="cidade-cliente" style="width:200px;" value="#{clienteController.cliente.cidade}">
								
								<f:selectItem itemValue="#{0}" itemLabel="Selecione..." />
								
								<f:selectItems value="#{cidadeController.listaCidade}" />
								
							</h:selectOneMenu>
							
							<rich:spacer width="11px"/>
							
							<h:outputLabel value="CEP:" style="FONT-SIZE: medium; FONT-FAMILY: 'SansSerif';"/>
							
							<rich:spacer width="19px"/>
							
							<h:inputText id="cep-cliente" style="width:60px" value="#{clienteController.cliente.cep}" >
									
								<rich:jQuery query="mask('99999-999');" selector="#cep-cliente" timing="onload"/>
									
							</h:inputText>
							
							<rich:spacer width="10px"/>
							
							<h:outputLabel value="Telefone:" style="FONT-SIZE: medium; FONT-FAMILY: 'SansSerif';"/>
							
							<rich:spacer width="30px"/>

							<h:inputText id="tel1-cliente" style="width:83px" value="#{clienteController.cliente.tel1}" >
								
								<rich:jQuery query="mask('(99) 9999-9999');" selector="#tel1-cliente" timing="onload"/>
								
							</h:inputText>
							
							<rich:spacer width="43px"/>
							
							<h:outputLabel value="Celular:" style="FONT-SIZE: medium; FONT-FAMILY: 'SansSerif';"/>
							
							<h:inputText id="tel2-cliente" style="width:83px;" value="#{clienteController.cliente.tel2}" >
							
								<rich:jQuery query="mask('(99) 9999-9999');" selector="#tel2-cliente" timing="onload"/>
							
							</h:inputText>
	
							<rich:spacer width="45px"/>
							
							<h:outputLabel value="E-mail:" style="FONT-SIZE: medium; FONT-FAMILY: 'SansSerif';"/>
							
							<h:inputText id="email-cliente" style="width:445px" onkeypress="this.style.textTransform = 'lowercase';" value="#{clienteController.cliente.email}" />
	
						</h:panelGrid>
						
					</rich:panel>
					
					<rich:spacer style="height:10px">
					
					</rich:spacer>
					
					<rich:panel>
					
						<f:facet name="header">
						
							<h:outputLabel value="Dados dos Administrador/Sócios" style="FONT-SIZE: small; FONT-FAMILY: 'SansSerif';"/>
							
						</f:facet>
						
						<h:panelGrid columns="8">
						
							<h:outputLabel value="CPF do Administrador:" style="FONT-SIZE: medium; FONT-FAMILY: 'SansSerif';"/>
							
							<h:inputText id="cpf-administrador-cliente" style="width:88px;" onkeypress="this.style.textTransform = 'uppercase';" value="#{clienteController.cliente.cpfResp1}" >
							
								<rich:jQuery query="mask('999.999.999-99');" selector="#cpf-administrador-cliente" timing="onload"/>
								
							</h:inputText>
							
							<rich:spacer width="10px;"/>
	
							<h:outputLabel value="Nome do Administrador:" style="FONT-SIZE: medium; FONT-FAMILY: 'SansSerif';"/>
							
							<h:inputText id="nome-administrador-cliente" style="width:400px;" onkeypress="this.style.textTransform = 'uppercase';" value="#{clienteController.cliente.nomeResp1}" />
							
							<rich:spacer width="10px;"/>
							
							<h:outputLabel value="Data de nascimento do Administrador:" style="FONT-SIZE: medium; FONT-FAMILY: 'SansSerif';"/>
							
							<rich:calendar value="#{clienteController.cliente.nascResp1}" datePattern="dd/MM/yyyy">
								
								<f:convertDateTime id="padraoDataNascimento" pattern="dd/MM/yyyy" />
								
							</rich:calendar>
							
						</h:panelGrid>
						
						<h:panelGrid columns="11">
						
							<h:outputLabel value="CPF do Sócio 1: " style="FONT-SIZE: medium; FONT-FAMILY: 'SansSerif';"/>
							
							<rich:spacer width="40px"/>
							
							<h:inputText id="cpf-socio1-cliente" style="width:88px;" onkeypress="this.style.textTransform = 'uppercase';" value="#{clienteController.cliente.cpfResp2}" >
							
								<rich:jQuery query="mask('999.999.999-99');" selector="#cpf-socio1-cliente" timing="onload"/>
								
							</h:inputText>
							
							<rich:spacer width="10px"/>
	
							<h:outputLabel value="Nome do Sócio 1:" style="FONT-SIZE: medium; FONT-FAMILY: 'SansSerif';"/>
							
							<rich:spacer width="42px"/>
							
							<h:inputText id="nome-socio1-cliente" style="width:400px;" onkeypress="this.style.textTransform = 'uppercase';" value="#{clienteController.cliente.nomeResp2}" />
							
							<rich:spacer width="10px"/>
							
							<h:outputLabel value="Data de nascimento do Sócio 1:" style="FONT-SIZE: medium; FONT-FAMILY: 'SansSerif';"/>
							
							<rich:spacer width="41px"/>
							
							<rich:calendar value="#{clienteController.cliente.nascResp2}" datePattern="dd/MM/yyyy">
								
								<f:convertDateTime id="padraoDataNascimento" pattern="dd/MM/yyyy" />
								
							</rich:calendar>
							
						</h:panelGrid>
						
						<h:panelGrid columns="11">
						
							<h:outputLabel value="CPF do Sócio 2:" style="FONT-SIZE: medium; FONT-FAMILY: 'SansSerif';"/>
							
							<rich:spacer width="40px"/>
							
							<h:inputText id="cpf-socio2-cliente" style="width:88px;" onkeypress="this.style.textTransform = 'uppercase';" value="#{clienteController.cliente.cpfResp3}" >
							
								<rich:jQuery query="mask('999.999.999-99');" selector="#cpf-socio2-cliente" timing="onload"/>
								
							</h:inputText>
							
							<rich:spacer width="10px"/>
							
							<h:outputLabel value="Nome do Sócio 2:" style="FONT-SIZE: medium; FONT-FAMILY: 'SansSerif';"/>
							
							<rich:spacer width="42px"/>
							
							<h:inputText id="nome-socio2-cliente" style="width:400px;" onkeypress="this.style.textTransform = 'uppercase';" value="#{clienteController.cliente.nomeResp3}" />
	
							<rich:spacer width="10px"/>							
							
							<h:outputLabel value="Data de nascimento do Sócio 2:" style="FONT-SIZE: medium; FONT-FAMILY: 'SansSerif';"/>
							
							<rich:spacer width="41px"/>
							
							<rich:calendar value="#{clienteController.cliente.nascResp3}" datePattern="dd/MM/yyyy">
								
								<f:convertDateTime id="padraoDataNascimento" pattern="dd/MM/yyyy" />
								
							</rich:calendar>
							
						</h:panelGrid>
						
					</rich:panel>
	
				</h:panelGrid>
	
				<rich:spacer width="100%" height="10px" />
	
				<h:commandButton value="Salvar" actionListener="#{clienteController.salvar}" onclick="submeter('formulario-dados');" style="FONT-SIZE: medium; FONT-FAMILY: 'SansSerif'; width:100px"/>
				
				<rich:messages>
				
					 <f:facet name="errorMarker">
           				<h:graphicImage url="/imagens/error.png"/>
    				 </f:facet>

     				<f:facet name="infoMarker">
			            <h:graphicImage url="/imagens/ok.png"/>
				    </f:facet>
			    
				    <f:facet name="warnMarker">
           				<h:graphicImage url="/imagens/alerta.png"/>
    				</f:facet>
					
				</rich:messages>
				
				<h:outputLabel value="O Produto mais indicado é #{requestScope['produto']}" rendered="#{not empty requestScope['produto']}"
				style="font-weight:bold;"/>
				
			</h:form>
	
			<rich:spacer width="100%" height="10px" />
	
			<rich:separator width="100%" height="10px;" />
	
			<rich:spacer width="100%" height="10px" />
	
			<h:form id="formulario-tabela" prependId="false">
			
				<rich:dataTable id="tabela" value="#{clienteController.lista}" var="cliente" style="width:100%;">
	
					<rich:column width="50">
					
						<div id="div-id" align="center">
						
							<f:facet name="header">
							
								<h:outputLabel value="ID" />
								
							</f:facet>
	
							<h:outputLabel value="#{cliente.id}" />
							
						</div>
						
					</rich:column>
	
					<rich:column width="30">
					
						<div id="div-cnpj" align="center">
						
							<f:facet name="header">
							
								<h:outputLabel value="CNPJ" />
								
							</f:facet>
	
							<h:outputLabel value="#{cliente.cnpj}" />
							
						</div>
						
					</rich:column>
	
					<rich:column width="140">
					
						<div id="div-razao-social" align="center">
						
							<f:facet name="header">
							
								<h:outputLabel value="Razão Social" />
								
							</f:facet>
	
							<h:outputLabel value="#{cliente.razaoSocial}" />
							
						</div>
						
					</rich:column>
	
					<rich:column width="150">
					
						<div id="div-nome-administrador" align="center">
						
							<f:facet name="header">
							
								<h:outputLabel value="Administrador" />
								
							</f:facet>
	
							<h:outputLabel value="#{cliente.nomeResp1}" />
							
						</div>
						
					</rich:column>
	
					<rich:column width="50">
					
						<div id="div-tel1" align="center">
						
							<f:facet name="header">
							
								<h:outputLabel value="Telefone" />
								
							</f:facet>
	
							<h:outputLabel value="#{cliente.tel1}" />
							
						</div>
						
					</rich:column>
	
					<rich:column width="50">
	
						<f:facet name="header">
						
							<h:outputLabel value="Ações" />
							
						</f:facet>
	
						<div align="center">
						
							<h:panelGrid columns="3">
							
								<h:commandButton value="Alterar" image="/imagens/editar.png"
									actionListener="#{clienteController.carregarRegistro}">
									
									<a4j:actionparam name="id" value="#{cliente.id}" />
									
								</h:commandButton>
	
								<rich:spacer width="10px" />
	
								<a4j:commandButton value="Excluir" image="/imagens/delete.png"
									actionListener="#{clienteController.excluirRegistro}"
									reRender="formulario-tabela,formulario-dados"
									process="formulario-tabela,formulario-dados">
									
									<a4j:actionparam name="id" value="#{cliente.id}" />
									
								</a4j:commandButton>
								
							</h:panelGrid>
							
						</div>
	
					</rich:column>
	
				</rich:dataTable>
			</h:form>
		</rich:panel>
		</ui:define>
	
	</ui:composition>
</html>
